<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <p>浏览器打开调试模式查看控制台信息</p>
    <form>
        <p>用户名：<input type="text" id="name"></p>
        <p>邮箱：<input type="text" id="email"></p>
        <p>密码：<input type="text" id="value1"></p>
        {% csrf_token %}
        <button type="button" id='jsonSend'>提交</button>
    </form>
    <script type='text/javascript'>
        $(document).ready(function () {
            $("#jsonSend").click(function () {
                //通过FormData构造函数创建一个空对象
                var data = new FormData();
                var name = $('#name').val();
                var email = $('#email').val();
                var value1 = $('#value1').val();
                console.log(name + ' ---> ' + typeof (name));
                //可以通过append()方法来追加数据
                data.append("name", name);
                data.append("email", email);
                data.append("value1", value1);

                var token = $('input[name=csrfmiddlewaretoken]').val();
                data.append('csrfmiddlewaretoken', token);
                //通过get方法对值进行读取
                console.log(data.get("email"));
                //通过set方法对值进行设置
                data.set("value2", "NUMBER-1001")

                $.ajax({
                    url: '/ajaxTest/jsonSendReceive/',
                    type: 'POST',
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function (arg) {
                        console.log(arg),
                            res = JSON.stringify(arg),
                            console.log("序列化：", res),
                            console.log("反序列化：", JSON.parse(res)),
                            alert(res)
                    }
                })

            });
        });
    </script>
    <hr>

    <div>
        <input type="button" onclick="myFunction()" value="显示警告框" /><br>
        <p>一、HTML DOM Document 对象:</p>
        <!-- 返回具有指定值的ID属性的元素 -->
        1、getElementById()方法：<p id="idDemo"></p>
        <!-- 返回具有给定类名称的元素列表 -->
        2、getElementsByClassName()方法：<p class="classDemo"></p>
        <button onclick="classDemo()">点击</button><br>
        <!-- 返回具有给定名称的元素列表 -->
        3、getElementsByName()方法：<br>
        <button onclick="nameDemo()">点击</button>
        <input type="text" name="nameDemo"><br>
        <!-- 返回具有给定标签名称的元素列表 -->
        4、getElementsByTagName()方法：<br>
        <p></p>
        <button onclick="tagDemo()">点击</button>
    </div>
    <hr>

    <div>
        <p>二、显示隐藏内容：</p>
        <p id="contentText">江湖是一张珠帘。大人物小人物，是珠子，大故事小故事，是串线。情义二字，则是那些珠子的精气神。开始收官中。最终章将以那一声“小二上酒”结尾。</p>
        <input type="button" onclick="hidetext()" value="隐藏内容" />
        <input type="button" onclick="showtext()" value="显示内容" />
    </div>
    <hr>

    <form id="advForm">
        <p>广告名称：<input type="text" name="Name" value="Daniel"></p>
        <p>广告类别：<select name="Type">
                <option value="1">轮播图</option>
                <option value="2">轮播图底部广告</option>
                <option value="3">热门回收广告</option>
                <option value="4">优品精选广告</option>
            </select></p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>
    <hr>

    <p>单选框</p>
    <form>
        <label value="radio">男</label>
        <input name="sex" value="male" id="boy" type="radio"><br>
        <label value="radio1">女</label>
        <input name="sex" value="female" id="girl" type="radio">
    </form>
    <form>
        <input type="radio" name="sex" value="male" /> Male
        <br />
        <input type="radio" name="sex" value="female" /> Female
    </form>
    <hr>

    <p>复选框</p>
    <form>
        <input id="c1" type="checkbox">selenium<br>
        <input id="c2" type="checkbox">python<br>
        <input id="c3" type="checkbox">appium<br>
    </form>

    <script>
        var x, y, z;
        x = 55;
        y = 45;
        z = x + y;
        document.getElementById("idDemo").innerHTML = "z 的值是" + z + "。";
        console.log('I am log.');
        console.info('I am info.');

        function myFunction() {
            alert("你好，我是一个警告框！");
        };

        function classDemo() {
            var x = document.getElementsByClassName("classDemo")[0].innerHTML = "getElementsByClassName";
        };

        function nameDemo() {
            var x = document.getElementsByName("nameDemo");
            x[0].value = "getElementsByName";
        };

        function tagDemo() {
            var x = document.getElementsByTagName("p");
            x[3].innerHTML = "getElementsByTagName";
        };
    </script>
    <script type="text/javascript">
        function hidetext() {
            var mychar = document.getElementById("contentText");
            mychar.style.display = "none";
        }

        function showtext() {
            var mychar = document.getElementById("contentText");
            mychar.style.display = "block";
        }
    </script>

</body>

</html>